<template>
	<div>
		<div style="margin-top: 30px">
			<el-form ref="TeacherSelfForm" :model="teacherSelfInfo" :rules="rules" label-position="left" label-width="85px">
				<el-form-item label="工号" prop="jobId">
					<el-input size="small" v-model="teacherSelfInfo.jobId" placeholder="请输入工号" style="width: 280px;"></el-input>
				</el-form-item>
                <el-form-item label="姓名" prop="tname">
                            <el-input size="small" style="width:180px"  
                            v-model="teacherSelfInfo.tname" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                                <el-radio-group v-model="teacherSelfInfo.gender">
                                    <el-radio label="男" style="margin-left: 5px;">男</el-radio>
                                    <el-radio label="女">女</el-radio>
                                </el-radio-group>
                </el-form-item>
				<el-form-item label="职称" prop="jobTitle">
                            <el-select v-model="teacherSelfInfo.jobTitle" size="small" style="width:180px;" placeholder="请选择职称">
                                <el-option
                                        v-for="item in jobTitles"
                                        :key="item"
                                        :label="item"
                                        :value="item">
                                </el-option>
                            </el-select>
                </el-form-item> 
				<el-form-item label="所在院系">
					<el-input size="small" v-model="teacherSelfInfo.dname" style="width: 180px;" disabled></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
                            <el-input v-model="teacherSelfInfo.email" style="width:180px" 
                                        size="small" placeholder="请输入邮箱">
                            </el-input>
                </el-form-item> 
                        <el-form-item label="电话" prop="telephone">
                            <el-input size="small" style="width:180px"  
                            v-model="teacherSelfInfo.telephone" placeholder="请输入电话号码"></el-input>
                </el-form-item>
			</el-form>
		</div>
		<div class="formBtn">
			<el-button type="primary" @click="submit">提交</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				teacherSelf:[],
                teacherSelfInfo: {},
                jobTitles:["助教","讲师","副教授","教授"],
				rules:{
				    jobId: [{required: true, message: '请输入工号',trigger: 'blur'}],
                    tname: [{required: true, message: '请输入姓名', trigger: 'blur'}],
                    gender: [{required: true, message: '请输入性别', trigger: 'blur'}],
                    jobTitle: [{required: true, message: '请选择职称', trigger: 'blur'}],
                    email: [{required: true, message: '请输入邮箱', trigger: 'blur'},
                            {type: "email",message: '邮箱格式不正确',trigger:'blur'}],
                    telephone: [{required: true, message: '请输入电话号码', trigger: 'blur'}],
				},
			}
		},
		mounted(){
			this.initTeacherSelf();
		},
		methods:{
			initTeacherSelf(){
				this.getRequest('/information/teacherSelf/').then(resp => {
					if(resp) {
						this.teacherSelf = resp;
						this.teacherSelfInfo = this.teacherSelf[0];
					}
				})
			},
			submit() {
				this.$refs['TeacherSelfForm'].validate(valid => {
					if (valid) {
						this.$confirm('此操作将提交修改的基地信息, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.putRequest("/information/teacherSelf/", this.teacherSelfInfo).then(resp => {
								if (resp) {
									this.initTeacherSelf();
								}
							})
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消提交'
							});
						});
					}
				})
			},
		}
	}
</script>

<style scoped>
	.formBtn{
		margin-top: 50px;
		margin-left: 20px;
	}
</style>
